/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-08 10:49:37
 * @LastEditTime : 2023-08-27 14:29:27
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\TemplateMap.jsx
 * @Description  :
 */
import './Scss/TemplateMap.scss'
import { useCallback, useEffect, useRef, useState } from 'react'
import { DrawingBed, ProvinceList } from '../../../../Common/Configure/CommonParameter'
import { ProvinceLabelList } from './TemplateMap/ProvinceLabelList'
import { TemplateMapDivList } from './TemplateMap/TemplateMapDivList'
import { PileFoundation } from './TemplateMap/PileFoundation'
import { useEventEmitter } from 'ahooks'

const { mars3d } = window

// 全国
export const TemplateMap001 = ({ AllChina, ActiveList, ActiveEvent }) => {
    const [Gra, setGra] = useState()

    ActiveEvent.useSubscription(val => {
        if (Gra) ActiveClick(Gra, val, AllChina.highlight)
    })

    const ActiveClick = useCallback((gra, val, highlight) => {
        gra.getGraphicsByAttr('TemplateMapDiv', 'attr').forEach(item => (item.show = false))
        if (gra.getGraphicById(val + '-label')) gra.getGraphicById(val + '-label').show = true
        gra.getGraphicByAttr(val, 'attr')?.openHighlight(highlight)
    }, [])

    const Mars3dBox = useRef()

    useEffect(() => {
        const { scene, MainWall, MainPoly, style, highlight, provinceStatus, provinceLable, divClass, defaultValue } =
            AllChina
        const MapOptions = JSON.parse(JSON.stringify({ scene }))
        const map = new mars3d.Map(Mars3dBox.current, MapOptions)
        const gra = new mars3d.layer.GraphicLayer()
        setGra(gra)
        map.addLayer(gra)
        // 绘制基础地图
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainWall))
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainPoly))
        Object.keys(ProvinceList).forEach(item => {
            mars3d.Util.fetchJson({ url: `${DrawingBed}Map/${item}.json` }).then(res => {
                mars3d.Util.geoJsonToGraphics(res).forEach(({ attr, positions }) => {
                    gra.addGraphic(new mars3d.graphic.PolygonEntity({ attr: item, name: attr.name, positions, style }))
                    if (highlight) gra.getGraphicByAttr(defaultValue, 'attr')?.openHighlight(highlight)
                })
            })

            const isBoolean = typeof provinceStatus === 'boolean'
            const isItemIncluded = isBoolean ? false : provinceStatus.includes(Number(item))
            if (provinceStatus && (isBoolean || isItemIncluded)) {
                if (isBoolean) gra.addGraphic(new mars3d.graphic.DivGraphic(ProvinceLabelList[provinceLable]({ item })))
                else gra.addGraphic(new mars3d.graphic.DivGraphic(ProvinceLabelList[provinceLable]({ item })))
            }
            if (divClass && defaultValue && Object.keys(ActiveList).includes(item)) {
                gra.addGraphic(
                    new mars3d.graphic.DivGraphic(
                        TemplateMapDivList[divClass]({ item, ActiveList, active: defaultValue === Number(item) }),
                    ),
                )
            }
        })

        if (highlight) gra.on('click', ({ graphic }) => ActiveClick(gra, graphic.attr, highlight))
    }, [AllChina, ActiveList, ActiveClick])

    return <div className="TemplateMap001" ref={Mars3dBox} />
}

// 某省份全区
export const TemplateMap002 = ({ AllProvince, mapId, LabelList, MapEvent, MapClickEvent }) => {
    const Mars3dBox = useRef()
    const [Lay, setLay] = useState(null)
    const ClickEvent = useEventEmitter()
    ClickEvent.useSubscription(val => {
        console.log(val)
    })

    MapEvent.useSubscription(val => DMap(val.list))

    const DMap = data => {
        if (Lay) {
            Lay.clear()
            const { divClass } = AllProvince
            data.forEach(item => {
                const div = new mars3d.graphic.DivGraphic(TemplateMapDivList[divClass]({ item }))
                Lay.addGraphic(div)
                div.on('click', ({ graphic }) => MapClickEvent.emit(graphic.id))
            })
        } else setTimeout(() => DMap(data), 500)
    }

    useEffect(() => {
        const { scene, MainWall, MainPoly, style, pileLable, cityStatus } = AllProvince

        const MapOptions = JSON.parse(JSON.stringify({ scene: scene(mapId) }))
        const map = new mars3d.Map(Mars3dBox.current, MapOptions)
        const gra = new mars3d.layer.GraphicLayer()
        const lay = new mars3d.layer.GraphicLayer()
        map.addLayer(gra)
        map.addLayer(lay)
        setLay(lay)

        map.addLayer(new mars3d.layer.GeoJsonLayer(MainWall(mapId)))
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainPoly(mapId)))

        mars3d.Util.fetchJson({ url: `${DrawingBed}Map/${mapId}.json` }).then(res => {
            mars3d.Util.geoJsonToGraphics(res).forEach(({ attr, positions }) => {
                gra.addGraphic(new mars3d.graphic.PolygonEntity({ attr: mapId, name: attr.name, positions, style }))
            })
            if (cityStatus) {
                Object.keys(cityStatus).forEach(item => {
                    gra.addGraphic(
                        new mars3d.graphic.DivGraphic(ProvinceLabelList[pileLable]({ item: cityStatus[item] })),
                    )
                })
            }
        })
    }, [AllProvince, LabelList, mapId])

    return <div className="TemplateMap002" ref={Mars3dBox} />
}

// 某省份
export const TemplateMap003 = ({ AllProvince, mapId, LabelList }) => {
    const [Gra, setGra] = useState()
    const Mars3dBox = useRef()
    useEffect(() => {
        if (Gra) {
            Gra.clear()
            if (LabelList && LabelList.length !== 0) {
                LabelList.forEach(item => {
                    Gra.addGraphic(new mars3d.graphic.DivGraphic(PileFoundation[item.PileLable]({ item })))
                    Gra.addGraphic(new mars3d.graphic.DivGraphic(TemplateMapDivList[item.divClass]({ item })))
                })
            }
        }
    }, [LabelList, Gra])

    useEffect(() => {
        const { scene, MainWall, MainPoly, style } = AllProvince({ mapId })
        const MapOptions = JSON.parse(JSON.stringify({ scene }))
        const map = new mars3d.Map(Mars3dBox.current, MapOptions)
        const gra = new mars3d.layer.GraphicLayer()
        const graTwo = new mars3d.layer.GraphicLayer()
        setGra(graTwo)
        map.addLayer(gra)
        map.addLayer(graTwo)
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainWall))
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainPoly))
        mars3d.Util.fetchJson({ url: `${DrawingBed}Map/${mapId}.json` }).then(res => {
            mars3d.Util.geoJsonToGraphics(res).forEach(({ attr, positions }) => {
                gra.addGraphic(new mars3d.graphic.PolygonEntity({ attr: mapId, name: attr.name, positions, style }))
            })
        })
    }, [AllProvince, mapId])

    return <div className="TemplateMap002" ref={Mars3dBox} />
}

// 全国显示公司数据
export const TemplateMap004 = ({ AllChina, ActiveList, ActiveEvent }) => {
    const [Lay, setLay] = useState()

    const Active = useCallback(
        data => {
            const { divClass } = AllChina
            Object.keys(data).forEach(key => {
                const div = new mars3d.graphic.DivGraphic(TemplateMapDivList[divClass]({ key, number: data[key] }))
                Lay.addGraphic(div)
            })
        },
        [AllChina, Lay],
    )

    useEffect(() => {
        if (Lay) {
            Lay.clear()
            if (ActiveList) Active(ActiveList)
        }
    }, [Active, ActiveList, Lay])

    const Mars3dBox = useRef()

    useEffect(() => {
        const { scene, MainWall, MainPoly, style, provinceStatus, provinceLable } = AllChina
        const MapOptions = JSON.parse(JSON.stringify({ scene }))
        const map = new mars3d.Map(Mars3dBox.current, MapOptions)
        const gra = new mars3d.layer.GraphicLayer()
        const lay = new mars3d.layer.GraphicLayer()
        setLay(lay)
        map.addLayer(gra)
        map.addLayer(lay)
        // 绘制基础地图
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainWall))
        map.addLayer(new mars3d.layer.GeoJsonLayer(MainPoly))
        Object.keys(ProvinceList).forEach(item => {
            mars3d.Util.fetchJson({ url: `${DrawingBed}Map/${item}.json` }).then(res => {
                mars3d.Util.geoJsonToGraphics(res).forEach(({ attr, positions }) => {
                    gra.addGraphic(new mars3d.graphic.PolygonEntity({ attr: item, name: attr.name, positions, style }))
                })
            })

            const isBoolean = typeof provinceStatus === 'boolean'
            const isItemIncluded = isBoolean ? false : provinceStatus.includes(Number(item))
            if (provinceStatus && (isBoolean || isItemIncluded)) {
                if (isBoolean) gra.addGraphic(new mars3d.graphic.DivGraphic(ProvinceLabelList[provinceLable]({ item })))
                else gra.addGraphic(new mars3d.graphic.DivGraphic(ProvinceLabelList[provinceLable]({ item })))
            }
        })
    }, [AllChina])

    return <div className="TemplateMap001" ref={Mars3dBox} />
}
